{extend name="common/base" /}
{block name="body"} 
<style>
    .layui-form-label{
        width: 100px;
    }
</style>
<div class="Content" id="content">
    <div class="container">
        <div class="cashNav">
            <a class="item " href="finance_cash.html">提现</a>
            <a class="item active" href="finance_log.html">提现记录</a>
            <a class="item " href="finance_account.html">提现账户</a>
        </div>

        <table class="layui-hide" id="withdrawTable" lay-filter="withdrawTable"></table>

    </div>
</div>
    <script type="text/html" id="addLayerTpl">
        <div class="layui-form" style="padding: 20px;">
        <div class="layui-form-item">
            <label class="layui-form-label">提现金额</label>
            <div class="layui-input-block">
            <input type="text" name="amount" placeholder="请输入提现金额" class="layui-input" required>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">提现时间</label>
            <div class="layui-input-block">
            <input type="text" name="time" placeholder="如 2025-06-12" class="layui-input" required>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">提现账户</label>
            <div class="layui-input-block">
            <input type="text" name="account" placeholder="请输入提现账户" class="layui-input" required>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
            <select name="status">
                <option value="提现中">提现中</option>
                <option value="完成">完成</option>
            </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="saveAdd">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        </div>
    </script>


    <script type="text/html" id="operateTpl">
        <div class="foot">
            <a class="btn-edit" lay-event="view">查看</a> 
            {{#  if(d.status == 0){ }}
            <span>|</span>
            <a class="btn-delete" lay-event="cancel">取消</a>
            {{#  } }}
        </div>
    </script>

{/block}
{block name="js"} 
<script>
    changeTitleName('提现记录');
    
    layui.use(['table', 'layer', 'form'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        // 渲染表格
        var tableIns  = table.render({
            elem: '#withdrawTable',
            url: '/merchant/merchant-finance-log',
            cols: [[
                { field: 'amount', title: '提现金额', maxWidth: 300, minWidth: 150 },
                
                {
                    field: 'account_user', 
                    title: '收款用户', 
                    maxWidth: 300, 
                    minWidth: 150,
                    templet: function(d){
                      // 组合显示收款用户信息
                      var html = [];
                      if (d.enc_true_name) {
                        html.push('<div><span style="font-weight:bold;">' + d.enc_true_name + '</span></div>');
                      }
                      if (d.enc_bank_no) {
                        // 显示银行卡号（通常需要脱敏处理）
                        var bankNo = d.enc_bank_no;
                        if (bankNo.length > 8) {
                            bankNo = bankNo.substring(0, 4) + ' **** **** ' + bankNo.substring(bankNo.length - 4);
                          }
                        html.push('<div style="color:#666;margin-top:2px;">银行卡: ' + bankNo + '</div>');
                      }
                      if (d.bank_code) {
                        // 这里假设 bank_code 是银行代码，你可能需要从 banks 表获取银行名称
                        // 如果有 bank_name 字段可以直接使用 d.bank_name
                        html.push('<div style="color:#888;margin-top:2px;">开户行: ' + (d.bank_name) + '</div>');
                      }
                      return html.join('');
                    }
                  },
                { field: 'commission', title: '手续费', maxWidth: 300, minWidth: 150 },
                { field: 'real_amount', title: '实际金额', maxWidth: 300, minWidth: 150 },
              
                {
                    field: 'status', 
                    title: '状态', 
                    width: 200, 
                    templet: function (d) {
                        var statusClass = '';
                        var statusName = '';
                        
                        switch (d.status) {
                            case 0: 
                                statusClass = 'layui-badge layui-bg-orange'; 
                                statusName = "待审核";
                                break;
                            case 1: 
                                statusClass = 'layui-badge layui-bg-blue'; 
                                statusName = "审核通过"; 
                                break;
                            case 2: 
                                statusClass = 'layui-badge layui-bg-prop';
                                statusName = "审核未通过"; 
                                break;
                            case 3: 
                                statusClass = 'layui-badge layui-bg-prop';
                                statusName = "已取消"; 
                                break;
                            default:
                                statusClass = 'layui-badge'; 
                                statusName = "未知状态(" + d.status + ")";
                        }
                        
                        return '<span class="' + statusClass + '">' + statusName + '</span>';
                    }
                },
                { field: 'create_time', title: '申请时间', maxWidth: 300, minWidth: 150 },
                {
                    field: 'operate', title: '操作',
                    toolbar: '#operateTpl',
                    width: 160
                }
            ]],
            page: true,
            limit: 10,
            limits: [10, 20, 30]
        });


        // 监听表格工具事件（查看、取消）
         table.on('tool(withdrawTable)', function (obj) {
            var data = obj.data;
            console.log(data)
            if (obj.event === 'view') {
                // 查看弹窗
                layer.open({
                    type: 1,
                    title: '查看提现记录',
                    skin: 'xieyiDialog',
                    content: `
                     <div class="layui-form" style="padding: 20px;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">提现金额</label>
                            <div class="layui-input-block">
                            <input type="text" name="amount" value="`+ data.amount + `" class="layui-input" disabled>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">提现时间</label>
                            <div class="layui-input-block">
                            <input type="text" name="time" value="`+ data.create_time + `" class="layui-input" disabled>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">收款方银行卡号</label>
                            <div class="layui-input-block">
                            <input type="text" name="account" value="`+ data.enc_bank_no + `" class="layui-input" disabled>
                            </div>
                        </div >
                        <div class="layui-form-item">
                            <label class="layui-form-label">收款方用户名</label>
                            <div class="layui-input-block">
                            <input type="text" name="account" value="`+ data.enc_true_name + `" class="layui-input" disabled>
                            </div>
                        </div >
                        <div class="layui-form-item">
                            <label class="layui-form-label">收款方开户行</label>
                            <div class="layui-input-block">
                            <input type="text" name="account" value="`+ data.bank_name + `" class="layui-input" disabled>
                            </div>
                        </div >
                        <div class="layui-form-item">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <input type="text" name="status" value="`+ data.status_text + `" class="layui-input" disabled>
                            </div>
                        </div>
                     </div >
                    `,
                    area: ['600px', '500px'],
                    success: function (layero, index) {
                        form.render(); // 渲染表单（主要是让 disabled 生效等）
                    },
                });
            } else if (obj.event === 'cancel') {
                // 取消弹窗
                layer.confirm('确定要取消该申请吗？', function(index) {
                    // 执行取消操作
                    $.post('/merchant/merchant-finance-cancel', {id: data.id}, function(res) {
                        if(res.code === 200) {
                            layer.msg('取消成功');
                            tableIns.reload();
                        } else {
                            layer.msg(res.msg || '取消失败');
                        }
                    });
                    layer.close(index);
                });

            }
        });
    });
</script>
{/block}